<template>
  <div>
    <!-- 一行一个 -->
    <div v-if="list.length == 1" class="img_wrap img_wrap_1">
      <van-image v-for="(item, index) in list" :key="index" :src="item" fit="cover" class="img_item" @click.stop="imagePreviews(list, index)" />
    </div>
    <!-- 一行两个 -->
    <div
      v-else-if="list.length <= 4 && list.length % 2 == 0"
      class="img_wrap img_wrap_2"
    >
      <van-image
        v-for="(item, index) in list"
        :src="item"
        :key="index"
        fit="cover"
        class="img_item"
        @click.stop="imagePreviews(list, index)"
      />
    </div>
    <!-- 一行三个 -->
    <div
      v-else-if="list.length > 4 || list.length == 3"
      class="img_wrap img_wrap_3"
    >
      <van-image
        v-for="(item, index) in list"
        :key="index"
        :src="item"
        fit="cover"
        class="img_item"
        @click.stop="imagePreviews(list, index)"
      />
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  props: {
    list: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    imagePreviews(arr, index) {
      ImagePreview({
        images: arr,
        startPosition: index
      })
    }
  }
}
</script>

<style lang="less">
.img_wrap {
  width: 100%;
  font-size: 0;
  padding: 5px 0;
  // img{
  //   background-size: 100% 100%;
  // }
}
.img_wrap_1 .img_item {
  // width: 100%;
  height: 120px;
}
.img_wrap_2 .img_item {
  box-sizing: border-box;
  width: 50%;
  height: 90px;
  margin-bottom: 5px;
}
.img_wrap_2 .img_item:nth-child(2n) {
  padding-left: 5px;
}
.img_wrap_2 .img_item:nth-child(2n-1) {
  padding-right: 5px;
}
.img_wrap_3 .img_item {
  box-sizing: border-box;
  width: 33.33%;
  height: 60px;
  margin-bottom: 5px;
}
.img_wrap_3 .img_item:nth-child(3n) {
  padding-left: 3.75px;
}
.img_wrap_3 .img_item:nth-child(3n-2) {
  padding-right: 3.75px;
}
.img_wrap_3 .img_item:nth-child(3n-1) {
  padding: 0 1.875px;
}
</style>
